<template>
  <div class="more-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="修改密码" name="first">
          <div class="tips">
            <i class="el-icon-warning icon-tips"></i>
            请先验证手机号，再设置新密码
            <br />
            密码设置说明：密码长度为9-16位，且至少包含数字、字母、下划线中的2个，字母区分大小写。
          </div>
        <el-row>
          <el-col :span="8">
            <div class="passwordcontent baseinfo">
              <div class="forget-pwd-con"></div>
              <div class="forget-form">
                  <el-form
                    ref="forgetform"
                    :model="forgetform"
                    label-width="80px"
                    :rules="rules"
                    size="medium"

                  >
                  <el-form-item label="手机号" prop="tel">
                    <el-input
                      :disabled='true'
                      v-model="forgetform.tel"
                      placeholder="请输入手机号"
                      @input="changephone"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="验证码" prop="smsCode">
                    <div class="phoneCodearea">
                      <el-input
                        v-model="forgetform.smsCode"
                        :placeholder="placeholderTetx"
                       auto-complete="new-password"
                        class="codeinput"
                        autocomplete="off"
                      ></el-input>
                      <el-button type="primary" :disabled="isdisable" @click="sendCode">{{ sendCodetext }}{{ senCodetime }}</el-button>
                    </div>
                  </el-form-item>

                  <el-form-item label="新密码" prop="newPassword">
                    <el-input
                      show-password
                      v-model="forgetform.newPassword"
                      placeholder="请输入新密码"
                        autocomplete="off"
                        auto-complete="new-password"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="rePassword">
                    <el-input
                      show-password
                      auto-complete="new-password"
                      v-model="forgetform.rePassword"
                      placeholder="确认密码"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-button class="" size="medium" style="margin-left:80px;" type="primary" @click="passwordsub">确认修改</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="修改手机号" name="second">请联系客服！</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { isPhone } from '@/utils/validate'
import { forgetpassword, getCode } from '@/api/common'
import {getSessionStorage} from '@/utils/accessToken'
export default {
  data() {
    return {
      placeholderTetx:'请输入验证码',
      activeName: 'first',
      //验证码计时器
      secodeTimer: null,
      //是否禁用发送验证码
      isdisable: false,
      //验证码倒计时
      senCodetime: '',
      //验证码文字
      sendCodetext: '发送验证码',
      //表单信息
      forgetform: {
        //手机号
        tel: '',
        //验证码
        smsCode:null,
        //新密码
        newPassword:null,
        //确认密码
        rePassword: '',
        //sms短信验证
        smsSign:''
      },
      //用户手机号
      tel:'',
      //表单验证
      rules: {
        tel: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'change',
          },
        ],
        smsCode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'change',
          },
        ],
        newPassword: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'change',
          },
        ],
        rePassword: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'change',
          },
        ],
      },
    }
  },
  props: {
    //是否显示忘记密码弹窗
    ishowpassword: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //切换tab
    handleClick(tab, event) {
      this.$refs['forgetform'].resetFields()
       //设置手机号
       let userinfo = getSessionStorage('userinfo')
       //设置默认修改的手机号
       this.tel = userinfo.tel
       this.forgetform.tel = userinfo.tel
    },
    //发送验证码
    async sendCode() {
      let params = {
        tel: this.forgetform.tel,
      }
      let data = await getCode(params)
      if(data.code=='0000'){
        this.forgetform.smsSign = data.data.smsSign
        this.placeholderTetx = '请输入编号为'+this.forgetform.smsSign+'验证码'
        clearInterval(this.secodeTimer)
      this.sendCodetext = '已发送'
      //验证码计时器60秒
      this.senCodetime = 60
      this.isdisable = true
      this.secodeTimer = setInterval(() => {
        if (this.senCodetime == 0) {
          this.senCodetime = ''
          this.sendCodetext = '发送验证码'
          this.placeholderTetx='请输入验证码'
          this.isdisable = false
          return
        } else {
          this.senCodetime--
        }
      }, 1000)
      }

    },
    //监听手机号输入事件
    changephone(val) {
      let result = isPhone(val)
      //手机号正确 就取消禁用
      if (result) {
        this.isdisable = false
      }
    },
    //关闭忘记密码
    closepassword() {
      this.$refs['forgetform'].resetFields()
      //向父组件传值
      this.$emit('closepassword')
    },
    //提交修改
    passwordsub() {
      this.$refs['forgetform'].validate(async (valid) => {
        if (!valid) return
        // TODO 提交表单
        let data = await forgetpassword(this.forgetform)
        if (data.code == '0000') {
          this.$message({
            type: 'success',
            message: '修改密码成功！',
          })
          this.$refs['forgetform'].resetFields()
          //重新赋值手机号
          this.forgetform.tel = this.tel
          //清空定时器
          clearInterval(this.secodeTimer)
          this.senCodetime = ''
          this.sendCodetext = '发送验证码'
          this.isdisable = false
          this.placeholderTetx='请输入验证码'
        }
      })
    },
  },
  mounted() {
       //设置手机号
       let userinfo = getSessionStorage('userinfo')
       //设置默认修改的手机号
       this.tel = userinfo.tel
       this.forgetform.tel = userinfo.tel
  },
}
</script>


<style scoped lang='scss'>
.closeicon {
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
  font-size: 24px;
  color: hsla(0, 0%, 40%, 0.6784313725490196);
  &:hover {
    color: $base-color-default;
  }
}
.tips {
  background: #e6f7ff;
  border-radius: 2px;
  border: 1px solid #91d5ff;
  margin: 0 0 25px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 22px;
  padding: 10px 30px;
  i {
    color: #1890ff;
  }
}
.phoneCodearea {
  display: flex;
  .codeinput {
    margin-right: 10px;
  }
}
::v-deep {
  .el-tabs__nav-wrap::after {
    height: 1px;
  }
  .el-tabs__item{
      font-size: 16px;
  }
  .el-tabs__item.is-active{
      font-weight: bold;
  }
}
.tips{
  margin-top: 15px;
  margin-bottom: 30px;
}
</style>
